<div
        class="modal fade"
        data-backdrop="static"
        data-keyboard="false"
        v-kb-modal="isShow">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button @click="reset" class="close"><i class="fa fa-close"></i></button>
                <h4 class="modal-title">{{Kooboo.text.component.viewEditor.condition}}</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div v-if="isRepeatConditionEnabled"  class="form-group">
                        <label class="control-label col-md-3">{{Kooboo.text.component.viewEditor.type}}</label>
                        <div class="col-md-9">
                            <label class="radio-inline">
                                <input type="radio"  v-model="conditionType" value="normal"> <span>{{Kooboo.text.component.viewEditor.normal}}</span>
                            </label>
                            <label class="radio-inline">
                                <input type="radio"  v-model="conditionType" value="repeat"> <span>{{Kooboo.text.component.viewEditor.repeat}}</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">{{Kooboo.text.component.viewEditor.condition}}</label>
                        <div class="col-md-9" v-if="conditionType === 'normal'">
                            <div class="input-group">
                                <div>
                                    <select v-model="normalConditionField"
                                            v-kb-hint:left="validateModel.normalConditionField.msg"
                                            class="form-control">
                                        <option value="">{{Kooboo.text.component.viewEditor.selectHint}}</option>
                                        <template v-for="(field,key) in fields">
                                            <optgroup v-if="field.list.length > 0" :label="field.name">
                                                <option v-for="item in field.list" :value="item.name">{{item.name}}</option>
                                            </optgroup>
                                        </template>
                                    </select>
                                </div>
                                <span class="input-group-addon separator"></span>
                                <div>
                                    <select v-model="conditionOperator"
                                            v-kb-hint="validateModel.conditionOperator.msg"
                                            class="form-control">
                                        <option v-for="item in operators" :value="item.symbol">{{item.name}}</option>
                                    </select>
                                </div>

                                <span class="input-group-addon separator"></span>
                                <div>
                                    <input v-kb-hint="validateModel.conditionValue.msg"
                                           v-model="conditionValue" type="text" class="form-control"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9 form-inline" v-if="conditionType === 'repeat'">
                            <div class="input-group">
                                <select class="form-control" v-model="repeatConditionField">
                                    <option value="repeat/odd">{{Kooboo.text.component.viewEditor.repeatCondition.odd}}</option>
                                    <option value="repeat/even">{{Kooboo.text.component.viewEditor.repeatCondition.even}}</option>
                                    <option value="repeat/first">{{Kooboo.text.component.viewEditor.repeatCondition.first}}</option>
                                    <option value="repeat/last">{{Kooboo.text.component.viewEditor.repeatCondition.last}}</option>
                                    <option value="repeat/">{{Kooboo.text.component.viewEditor.repeatCondition.number}}</option>
                                </select>
                                <span class="input-group-addon separator"></span>
                                <div v-show="repeatConditionField === 'repeat/'">
                                    <input
                                           v-kb-hint="validateModel.repeatConditionNumberParam.msg"
                                           v-model="repeatConditionNumberParam"
                                           type="text" class="form-control"/>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button @click="save" class="btn green">{{Kooboo.text.common.save}}</button>
                <button @click="reset" class="btn gray">{{Kooboo.text.common.cancel}}</button>
            </div>
        </div>
    </div>

</div>
